<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input
          type="file"
          name="avatar"
          accept=".md,image/*"
          placeholder="请选择头像"
        />
        <button>上传文件</button>
      </form>
</body>
<img src="" alt="" class="avatar" style="width: 500px;">
<script src="./js/axios.js"></script>
<script>
    //获取表单元素
    const form = document.querySelector('form');
    const avatar = document.querySelector('.avatar');

    // 绑定提交事件
    form.addEventListener('submit', function (e) {
        // 阻止默认提交事件
        e.preventDefault()

        // 体验FormData  获取头像的文件
        const fn = new FormData(this);
        // console.log(fn.get('avatar'));

        // 发送请求
        axios({
            url: 'http://ajax-api.itheima.net/api/file',
            method: 'POST',
            data: fn,
        })
          .then(({data: res}) => {
            const url = res.data.url
            avatar.src = url
          })
    })
    
</script>
</html>